<template>
  <view :class="['app', `theme-${currentTheme}`]">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { onLaunch, onShow, onHide, onError } from '@dcloudio/uni-app';
import { computed } from 'vue';
import { useThemeStore, ThemeType } from '@/store/modules/theme';

const themeStore = useThemeStore();
const currentTheme = computed(() => themeStore.currentTheme);

// 定义错误对象的接口
interface ErrorObject {
  message?: string;
  stack?: string;
  [key: string]: any;
}

// 判断是否为生产环境
const isProd = uni.getSystemInfoSync().platform !== 'devtools';

// 声明全局变量，用于备份和分享
declare global {
  interface UniApp {
    globalData: {
      backupFilePath?: string;
      pendingBackup?: boolean;
      backupSuccess?: boolean;
      [key: string]: any;
    }
  }
}

// 初始化全局应用状态
const app = getApp<{
  globalData: {
    backupFilePath?: string;
    pendingBackup?: boolean;
    backupSuccess?: boolean;
    [key: string]: any;
  }
}>();

// 确保应用初始化了globalData
if (app && !app.globalData) {
  app.globalData = {
    backupFilePath: '',
    pendingBackup: false,
    backupSuccess: false
  };
}

// 初始化主题
onLaunch(() => {
  themeStore.initTheme();
  console.log('App Launch');
});

onShow(() => {
  // 应用显示
  console.log('App Show');
});

onHide(() => {
  // 应用隐藏
  console.log('App Hide');
});

onError((err) => {
  // 只在生产环境记录错误
  if (isProd) {
    const errObj: ErrorObject = typeof err === 'string' ? { message: err } : err;
    console.error('应用错误:', {
      message: errObj.message || '未知错误',
      stack: errObj.stack || '无堆栈信息'
    });
  }
});

// 全局错误处理
if (typeof window !== 'undefined') {
  window.addEventListener('error', (event: ErrorEvent) => {
    if (isProd) {
      console.error('全局错误:', event.message);
    }
  });

  window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
    if (isProd) {
      console.error('未处理的Promise拒绝:', event.reason);
    }
    event.preventDefault();
  });
}
</script>

<style lang="scss">
@import '@/styles/theme.scss';
@import '@/styles/global.scss';
@import '@/styles/iconfont.scss';
@import '@/styles/button.scss';

// 全局基础样式
.app {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--text-primary);
  font-size: 28rpx;
  line-height: 1.5;
}

// 主题相关样式
.theme-wedding {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
  }

  // 图标和文字
  .iconfont {
    color: #ff6b6b !important;
  }

  .link-text {
    color: #ff6b6b !important;
  }

  // 金额文字
  .amount {
    color: #ff6b6b !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
  }
}

.theme-funeral {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #2c3e50, #34495e);
  }

  // 图标和文字
  .iconfont {
    color: #2c3e50 !important;
  }

  .link-text {
    color: #2c3e50 !important;
  }

  // 金额文字
  .amount {
    color: #2c3e50 !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #2c3e50, #34495e);
  }
}

.theme-birthday {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
  }

  // 图标和文字
  .iconfont {
    color: #ff6b6b !important;
  }

  .link-text {
    color: #ff6b6b !important;
  }

  // 金额文字
  .amount {
    color: #ff6b6b !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
  }
}

.theme-graduation {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #1890FF, #096DD9);
  }

  // 图标和文字
  .iconfont {
    color: #1890FF !important;
  }

  .link-text {
    color: #1890FF !important;
  }

  // 金额文字
  .amount {
    color: #1890FF !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #1890FF, #096DD9);
  }
}

.theme-business {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #722ED1, #531DAB);
  }

  // 图标和文字
  .iconfont {
    color: #722ED1 !important;
  }

  .link-text {
    color: #722ED1 !important;
  }

  // 金额文字
  .amount {
    color: #722ED1 !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #722ED1, #531DAB);
  }
}

.theme-housewarming {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #52C41A, #389E0D);
  }

  // 图标和文字
  .iconfont {
    color: #52C41A !important;
  }

  .link-text {
    color: #52C41A !important;
  }

  // 金额文字
  .amount {
    color: #52C41A !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #52C41A, #389E0D);
  }
}

.theme-fullmoon {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #F759AB, #EB2F96);
  }

  // 图标和文字
  .iconfont {
    color: #F759AB !important;
  }

  .link-text {
    color: #F759AB !important;
  }

  // 金额文字
  .amount {
    color: #F759AB !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #F759AB, #EB2F96);
  }
}

.theme-longevity {
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #FAAD14, #D48806);
  }

  // 图标和文字
  .iconfont {
    color: #FAAD14 !important;
  }

  .link-text {
    color: #FAAD14 !important;
  }

  // 金额文字
  .amount {
    color: #FAAD14 !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #FAAD14, #D48806);
  }
}

.theme-other {
  background-color: var(--background-color);
  // 统计卡片
  .stats-card {
    background: linear-gradient(135deg, #13C2C2, #08979C);
  }

  // 图标和文字
  .iconfont {
    color: #13C2C2 !important;
  }

  .link-text {
    color: #13C2C2 !important;
  }

  // 金额文字
  .amount {
    color: #13C2C2 !important;
  }

  // FAB 按钮
  .fab-main:not(.fab-expanded),
  .fab-action-button {
    background: linear-gradient(135deg, #13C2C2, #08979C);
  }
}

// 基础样式
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: $text-primary;
  font-size: 28rpx;
  line-height: 1.5;
  min-height: 100vh;
}

// 导航栏基础样式
.uni-navbar {
  background-color: var(--primary-color) !important;
  
  .uni-navbar__header-title {
    color: var(--button-text-color) !important;
    font-weight: bold;
  }
  
  .uni-navbar__btn {
    color: var(--button-text-color) !important;
  }
}

// 底部导航栏基础样式
.uni-tabbar {
  .uni-tabbar__item {
    .uni-tabbar__icon {
      font-size: 48rpx;
      color: #999 !important;
    }
    
    .uni-tabbar__label {
      font-size: 24rpx;
      color: #999 !important;
    }
    
    &.uni-tabbar__item--active {
      .uni-tabbar__icon,
      .uni-tabbar__label {
        color: var(--primary-color) !important;
      }
    }
  }
}

/* H5 环境下的全局样式 */
/* #ifdef H5 */
body {
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100vh;
}

.uni-tabbar {
  display: flex !important;
}

.uni-tabbar-bottom {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
}

.uni-page-head {
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  z-index: 998 !important;
  background-color: var(--primary-color) !important;
  
  .uni-page-head__title {
    color: var(--button-text-color) !important;
  }
  
  .uni-page-head__btn {
    color: var(--button-text-color) !important;
  }
}

.uni-page-wrapper {
  padding-top: 44px !important;
  padding-bottom: 50px !important;
}
/* #endif */

.app {
  // ... existing app styles ...

  // 主题相关样式
  &.theme-birthday {
    // 统计卡片
    .stats-card {
      background: linear-gradient(135deg, #ff6b6b, #ff4757);
    }

    // 图标和文字
    .iconfont {
      color: #ff6b6b !important;
    }

    .link-text {
      color: #ff6b6b !important;
    }

    // 金额文字
    .amount {
      color: #ff6b6b !important;
    }

    // 导航栏样式
    .uni-tabbar {
      .uni-tabbar-item {
        &.active {
          color: #ff6b6b !important;
        }
      }
    }

    .uni-navbar {
      .uni-navbar__header-btns {
        color: #ff6b6b !important;
      }

      .uni-navbar__header-container {
        color: #ff6b6b !important;
      }
    }
  }
}
</style> 